<script setup>
	import FirstTitle from "@comp/FirstTitle";
	import {
		Editor,
		Toolbar
	} from "@wangeditor/editor-for-vue";
	import {
		onMounted
	} from "vue";
	
	import {
		searchDataZzgz
	} from "@/api/search";
	import {
		addOrUpdateZzgz
	} from "@/api/addOrUpdate";


	const city = window.globalObj.name;

	const editorRef = shallowRef();
	const editorRef1 = shallowRef();
	const editorRef2 = shallowRef();
	const editorRef3 = shallowRef();
	const editorRef4 = shallowRef();
	const editorRef5 = shallowRef();
	const editorRef6 = shallowRef();

	const toolbarConfig = {};
	const toolbarConfig1 = {};
	const toolbarConfig2 = {};
	const toolbarConfig3 = {};
	const toolbarConfig4 = {};
	const toolbarConfig5 = {};
	const toolbarConfig6 = {};



	const editorConfig = {
		placeholder: "请输入内容..."
	};
	const mode = ref("default");
	const mode1 = ref("default");
	const mode2 = ref("default");
	const mode3 = ref("default");
	const mode4 = ref("default");
	const mode5 = ref("default");
	const mode6 = ref("default");

	// 加载html
	const initHtml = () => {
		searchDataZzgz({
			m: "任务需求"
		}).then((res) => {
			const {
				data
			} = res
			valueHtml.value = data.find((x) => x.k === "党组织建设需求")?.v || "";
			valueHtml1.value = data.find((x) => x.k === "团组织建设需求")?.v || "";
			valueHtml2.value = data.find((x) => x.k === "干部建设需求")?.v || "";
			valueHtml3.value = data.find((x) => x.k === "思想政治教育需求")?.v || "";
			valueHtml4.value = data.find((x) => x.k === "安全保卫需求")?.v || "";
			valueHtml5.value = data.find((x) => x.k === "纪检监察需求")?.v || "";
			valueHtml6.value = data.find((x) => x.k === "奖惩优抚需求")?.v || "";
		})
	};

	const handleCreated = (editor) => {
		editorRef.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated1 = (editor) => {
		editorRef1.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated2 = (editor) => {
		editorRef2.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated3 = (editor) => {
		editorRef3.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated4 = (editor) => {
		editorRef4.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated5 = (editor) => {
		editorRef5.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated6 = (editor) => {
		editorRef6.value = editor; // 记录 editor 实例，重要！
	};

	const valueHtml = ref(
		"能力需求：能够遵循党的组织原则和组织路线，不断改进和加强党的组织制度、组织机构、组织纪律、领导制度，提高干部队伍素质和党员队伍素质。<br/>组织体系建设需求：县（区）、街道应设立党工委；各社区按照正式党员人数达到3人以上的应设立党支部，党员人数50-100人的应设立党总支，党员人数达100人以上的应设立党委。"
	);

	const valueHtml1 = ref(
		"能力需求：能够在中国共产党的领导下，遵循党的组织原则和组织路线，不断改进和加强团的组织制度、组织机构、组织纪律、领导制度，提高干部队伍素质和团员队伍素质。<br/>组织体系建设需求：各县（区）、街道应设立团工委；各社区应设立团支部（或团总支、团委）。"
	)
	const valueHtml2 = ref(
		"能力需求：能够做好打持久战准备，不断提升统筹治理、精准治理与依法治理的能力，在推进防空袭的基础上，同步促进经济社会发展。<br/>干部队伍建设需求：辖区干部按编制员额满编的标准执行，各街道办事处编配人数应不少于19人、各社区编配人数应不少于10人。"
	)
	const valueHtml3 = ref(
		"能力需求：能够提高政治站位，加强组织领导；能够强化工作职责，突出工作重点；能够加强督导检查，严肃工作纪律；能够加强宣传教育，提高防范意识。<br/>机构（干部）建设需求：各县（区）、街道应设立党工委；各街道、社区应设置1个党政办公室；社区居委会应配备1名书记、1名副书记。"
	)
	const valueHtml4 = ref(
		"能力需求：能够负责防空袭中的社会治安和重点区域的警戒工作；加强值班巡逻，严密控制危险分子，高度警惕恐怖分子的破坏行动，坚决打击犯罪活动；组织基层治安队伍加强内部治安保卫工作，开展地区联防，按路段设立哨卡，维护治安秩序。<br/>队伍建设需求：各县公安局应配备负责防空袭安全保卫工作1人、区公安分局应配备负责防空袭安全保卫工作1人、街道公安派出所应配备负责防空袭安全保卫工作1人；各街道应设置1个负责社会和经济事务的办公室；各社区应配备安保人员不少于2人。"
	)
	const valueHtml5 = ref(
		"能力需求：能够遵守、宣传、维护国家财经制度和财务纪律，做好普法教育、民事调解、法律服务工作，维护居民的合法权益。<br/>机构（人员）建设需求：各县（区）应设置纪检监察委员会；各街道、社区党工委应设纪律检查工作委员会；社区党委应设立党的纪律检查委员会或纪律检查委员。"
	)
	const valueHtml6 = ref(
		"能力需求：能够做好拥军优属、优抚安置、民兵、兵役、侨务和婚姻殡葬管理等工作；尊重少数民族的风俗习惯，保障少数民族的权益。<br/>机构（人员）建设需求：各街道应设置1个负责社会和经济事务的办公室；各社区应配备民政协调员不少于1人。"
	)

	const saveProgramme = () => {
		ElMessageBox.confirm(`确定要保存吗?`, "警告", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			customClass: "message-box",
		}).then(() => {
			addOrUpdateZzgz({
					m: "任务需求",
					data: [{
							k: "党组织建设需求",
							v: valueHtml.value,
						},
						{
							k: "团组织建设需求",
							v: valueHtml1.value,
						},
						{
							k: "干部建设需求",
							v: valueHtml2.value,
						},
						{
							k: "思想政治教育需求",
							v: valueHtml3.value,
						},
						{
							k: "安全保卫需求",
							v: valueHtml4.value,
						},
						{
							k: "纪检监察需求",
							v: valueHtml5.value,
						},
						{
							k: "奖惩优抚需求",
							v: valueHtml6.value,
						}
					],
				})
				.then((result) => {
					if (result.code === 200) {
						ElMessage.success("操作成功");
						initHtml();
					} else {
						ElMessage.error(result.msg);
					}
				})
				.catch(() => {});
		});
	}

	onMounted(() => {
		initHtml();
	});
	onBeforeUnmount(() => {
		const editor = editorRef.value;
		const editor1 = editorRef1.value;
		const editor2 = editorRef2.value;
		const editor3 = editorRef3.value;
		const editor4 = editorRef4.value;
		const editor5 = editorRef5.value;
		const editor6 = editorRef6.value;
		if (!editor) return;
		if (!editor1) return;
		if (!editor2) return;
		if (!editor3) return;
		if (!editor4) return;
		if (!editor5) return;
		if (!editor6) return;
		editor.destroy();
		editor1.destroy();
		editor2.destroy();
		editor3.destroy();
		editor4.destroy();
		editor5.destroy();
		editor6.destroy();

	});
</script>
<template>
	<div class="">
		<div>
			主要分析组织建设、干部建设、思想政治教育、安全保卫、纪检监察、奖惩优抚等需求的事项。
		</div>
		<FirstTitle name="党组织建设需求" class="top-15" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
				:mode="mode" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
				:mode="mode" @onCreated="handleCreated" />
		</div>
		<FirstTitle name="团组织建设需求" class="top-15" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef1" :defaultConfig="toolbarConfig1"
				:mode="mode1" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml1" :defaultConfig="editorConfig"
				:mode="mode1" @onCreated="handleCreated1" />
		</div>
		<FirstTitle name="干部建设需求" class="top-15" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef2" :defaultConfig="toolbarConfig2"
				:mode="mode2" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml2" :defaultConfig="editorConfig"
				:mode="mode2" @onCreated="handleCreated2" />
		</div>
		<FirstTitle name="思想政治教育需求" class="top-15" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef3" :defaultConfig="toolbarConfig3"
				:mode="mode3" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml3" :defaultConfig="editorConfig"
				:mode="mode3" @onCreated="handleCreated3" />
		</div>
		<FirstTitle name="安全保卫需求" class="top-15" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef4" :defaultConfig="toolbarConfig4"
				:mode="mode4" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
				:mode="mode4" @onCreated="handleCreated4" />
		</div>
		<FirstTitle name="纪检监察需求" class="top-15" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef5" :defaultConfig="toolbarConfig5"
				:mode="mode5" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml5" :defaultConfig="editorConfig"
				:mode="mode5" @onCreated="handleCreated5" />
		</div>
		<FirstTitle name="奖惩优抚需求" class="top-15" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef6" :defaultConfig="toolbarConfig6"
				:mode="mode6" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml6" :defaultConfig="editorConfig"
				:mode="mode6" @onCreated="handleCreated6" />
		</div>












		<div class="flex-justify-end top-20">
			<el-button type="primary" class="save-btn" @click="saveProgramme">保存</el-button>
		</div>
	</div>
</template>
<style scoped lang="scss"></style>